<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>区块工具</title>
    <link rel="stylesheet" href="css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #fff;
            color: #333;
            line-height: 1.6;
            padding: 20px;
        }
        
        .container {
            width: 100%;
            background: white;
            border-radius: 12px;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        .content-area {
            display: flex;
            gap: 20px;
            padding: 25px;
        }
        
        .editor-panel, .preview-panel {
            flex: 1;
            background: white;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid #eaeaea;
            display: flex;
            flex-direction: column;
        }
        
        .panel-header {
            padding: 15px 20px;
            background: #f8f9fa;
            border-bottom: 1px solid #eaeaea;
            font-weight: 600;
            color: #07C160;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .editor {
            padding: 20px;
            min-height: 150px;
            outline: none;
            font-size: 16px;
            line-height: 1.8;
            flex: 1;
        }
        
        .preview-content {
            padding: 20px;
            min-height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
        }
        
        .customization-panel {
            padding: 20px;
            border-top: 1px solid #eaeaea;
            background: #fafafa;
        }
        
        .customization-panel h3 {
            margin-bottom: 15px;
            color: #07C160;
            font-size: 16px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .custom-options {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 15px;
        }
        
        .option-group {
            margin-bottom: 15px;
        }
        
        .option-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #555;
            font-size: 14px;
        }
        
        .option-group select, .option-group input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
        }
        
        .color-options {
            display: flex;
            gap: 8px;
            margin-top: 5px;
            flex-wrap: wrap;
        }
        
        .color-option {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid transparent;
        }
        
        .color-option.active {
            border-color: #07C160;
        }
        
        .color-picker-container {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 5px;
        }
        
        .custom-color-input {
            width: 80px !important;
            height: 30px;
            padding: 3px !important;
        }
        
        blockquote {
            border-left: 4px solid #07C160;
            padding: 15px 20px;
            margin: 0;
            background: rgba(7, 193, 96, 0.05);
            color: #333;
            border-radius: 0 6px 6px 0;
            font-size: 16px;
            line-height: 1.7;
            max-width: 100%;
            font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
        }
        
        .complex-blockquote {
            position: relative;
            padding: 20px;
            margin: 20px 0;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            background: linear-gradient(135deg, rgba(7, 193, 96, 0.05) 0%, rgba(7, 193, 96, 0.02) 100%);
        }
        
        .complex-blockquote::before {
            content: """;
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 40px;
            color: rgba(7, 193, 96, 0.3);
            font-family: serif;
        }
        
        .complex-blockquote::after {
            content: """;
            position: absolute;
            bottom: 10px;
            right: 10px;
            font-size: 40px;
            color: rgba(7, 193, 96, 0.3);
            font-family: serif;
            transform: rotate(180deg);
        }
        
        .complex-blockquote .quote-content {
            position: relative;
            z-index: 1;
            padding: 10px 0;
        }
        
        .complex-blockquote .quote-author {
            text-align: right;
            margin-top: 15px;
            font-style: italic;
            color: #666;
            font-size: 14px;
        }
        
        .format-selector {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }
        
        .format-option {
            flex: 1;
            padding: 8px;
            text-align: center;
            border: 1px solid #ddd;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 14px;
        }
        
        .format-option.active {
            border-color: #07C160;
            background: rgba(7, 193, 96, 0.05);
        }
        
        @media (max-width: 768px) {
            .content-area {
                flex-direction: column;
            }
            
            .custom-options {
                grid-template-columns: 1fr;
            }
            
            .format-selector {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content-area">
            <!-- 左侧编辑区域（合并了编辑内容和样式设置） -->
            <div class="editor-panel">
                <div class="panel-header">
                    <i class="fas fa-edit"></i> 编辑区域
                </div>
                
                <!-- 格式选择 -->
                <div style="padding: 15px 20px 0;">
                    <div class="format-selector">
                        <div class="format-option active" data-format="simple">简单引用</div>
                        <div class="format-option" data-format="complex">复杂引用</div>
                    </div>
                </div>
                
                <!-- 内容编辑区域 -->
                <div id="editor" class="editor" contenteditable="true">
                    这是一个引用区块，可以用来强调重要观点或引用他人话语。
                </div>
                <div id="author-editor" class="editor" style="display: none; margin-top: 10px; min-height: 50px;" contenteditable="true">
                    —— 作者名称
                </div>
                
                <!-- 自定义样式设置 -->
                <div class="customization-panel">
                    <h3><i class="fas fa-sliders-h"></i> 自定义样式</h3>
                    <div class="custom-options">
                        <div class="option-group">
                            <label>边框颜色</label>
                            <div class="color-options">
                                <div class="color-option active" style="background-color: #07C160;" data-color="#07C160"></div>
                                <div class="color-option" style="background-color: #10AEFF;" data-color="#10AEFF"></div>
                                <div class="color-option" style="background-color: #FA9D3B;" data-color="#FA9D3B"></div>
                                <div class="color-option" style="background-color: #6467EF;" data-color="#6467EF"></div>
                                <div class="color-option" style="background-color: #EB685F;" data-color="#EB685F"></div>
                                <div class="color-option" style="background-color: #9B59B6;" data-color="#9B59B6"></div>
                            </div>
                            <div class="color-picker-container">
                                <input type="color" id="customColorPicker" class="custom-color-input" value="#07C160">
                                <span style="font-size: 12px;">自定义颜色</span>
                            </div>
                        </div>
                        
                        <div class="option-group">
                            <label>背景透明度</label>
                            <select id="backgroundOpacity">
                                <option value="0.02">极浅</option>
                                <option value="0.05" selected>标准</option>
                                <option value="0.1">中等</option>
                                <option value="0.15">较深</option>
                                <option value="0.2">深色</option>
                            </select>
                        </div>
                        
                        <div class="option-group">
                            <label>边框宽度</label>
                            <select id="borderWidth">
                                <option value="2px">细</option>
                                <option value="4px" selected>标准</option>
                                <option value="6px">粗</option>
                                <option value="8px">特粗</option>
                            </select>
                        </div>
                        
                        <div class="option-group">
                            <label>字体大小</label>
                            <select id="fontSize">
                                <option value="14px">小</option>
                                <option value="16px" selected>标准</option>
                                <option value="18px">大</option>
                                <option value="20px">特大</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 右侧预览区域 -->
            <div class="preview-panel">
                <div class="panel-header">
                    <i class="fas fa-eye"></i> 实时预览
                </div>
                <div class="preview-content">
                    <blockquote id="preview-blockquote">这是一个引用区块，可以用来强调重要观点或引用他人话语。</blockquote>
                    <div id="preview-complex" class="complex-blockquote" style="display: none;">
                        <div class="quote-content">这是一个引用区块，可以用来强调重要观点或引用他人话语。</div>
                        <div class="quote-author">—— 作者名称</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 初始化预览
        document.addEventListener('DOMContentLoaded', function() {
            updatePreview();
            
            // 监听编辑区域内容变化
            document.getElementById('editor').addEventListener('input', function() {
                updatePreview();
            });
            
            document.getElementById('author-editor').addEventListener('input', function() {
                updatePreview();
            });
            
            // 颜色选择事件
            document.querySelectorAll('.color-option').forEach(option => {
                option.addEventListener('click', function() {
                    document.querySelectorAll('.color-option').forEach(o => {
                        o.classList.remove('active');
                    });
                    this.classList.add('active');
                    document.getElementById('customColorPicker').value = this.dataset.color;
                    updatePreview();
                });
            });
            
            // 自定义颜色选择器事件
            document.getElementById('customColorPicker').addEventListener('input', function() {
                document.querySelectorAll('.color-option').forEach(o => {
                    o.classList.remove('active');
                });
                updatePreview();
            });
            
            // 自定义选项变化事件
            document.getElementById('backgroundOpacity').addEventListener('change', updatePreview);
            document.getElementById('borderWidth').addEventListener('change', updatePreview);
            document.getElementById('fontSize').addEventListener('change', updatePreview);
            
            // 格式选择事件
            document.querySelectorAll('.format-option').forEach(option => {
                option.addEventListener('click', function() {
                    document.querySelectorAll('.format-option').forEach(o => {
                        o.classList.remove('active');
                    });
                    this.classList.add('active');
                    
                    const format = this.dataset.format;
                    if (format === 'complex') {
                        document.getElementById('author-editor').style.display = 'block';
                        document.getElementById('preview-blockquote').style.display = 'none';
                        document.getElementById('preview-complex').style.display = 'block';
                    } else {
                        document.getElementById('author-editor').style.display = 'none';
                        document.getElementById('preview-blockquote').style.display = 'block';
                        document.getElementById('preview-complex').style.display = 'none';
                    }
                    
                    updatePreview();
                });
            });
        });
        
        // 更新预览
        function updatePreview() {
            const editorContent = document.getElementById('editor').innerHTML;
            const authorContent = document.getElementById('author-editor').innerHTML;
            
            // 获取当前选择的颜色
            let activeColor = document.querySelector('.color-option.active') ? 
                document.querySelector('.color-option.active').dataset.color : 
                document.getElementById('customColorPicker').value;
                
            // 如果使用了自定义颜色选择器
            if (document.getElementById('customColorPicker').value !== activeColor && 
                !document.querySelector('.color-option.active')) {
                activeColor = document.getElementById('customColorPicker').value;
            }
                
            const opacity = document.getElementById('backgroundOpacity').value;
            const borderWidth = document.getElementById('borderWidth').value;
            const fontSize = document.getElementById('fontSize').value;
            
            // 更新预览内容
            const isComplex = document.querySelector('.format-option.active').dataset.format === 'complex';
            
            if (isComplex) {
                const preview = document.getElementById('preview-complex');
                preview.querySelector('.quote-content').innerHTML = editorContent;
                preview.querySelector('.quote-author').innerHTML = authorContent;
                
                // 更新样式
                preview.style.background = `linear-gradient(135deg, rgba(${hexToRgb(activeColor)}, ${opacity}) 0%, rgba(${hexToRgb(activeColor)}, ${opacity/2}) 100%)`;
                preview.style.borderLeft = `${borderWidth} solid ${activeColor}`;
                preview.style.fontSize = fontSize;
            } else {
                const preview = document.getElementById('preview-blockquote');
                preview.innerHTML = editorContent;
                
                // 更新样式
                preview.style.borderLeftColor = activeColor;
                preview.style.background = `rgba(${hexToRgb(activeColor)}, ${opacity})`;
                preview.style.borderLeftWidth = borderWidth;
                preview.style.fontSize = fontSize;
            }
        }
        
        // 将十六进制颜色转换为RGB值
        function hexToRgb(hex) {
            // 处理自定义颜色选择器返回的值
            if (hex.startsWith('#')) {
                const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
                return result ? 
                    `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}` 
                    : '7, 193, 96';
            }
            return hex;
        }
    </script>
</body>
</html>